<script setup>
const props = defineProps({
  title: String,
  content: String,
  more: {
    type: Boolean,
    default: true,
  },
})
</script>

<template>
  <view class="song-item">
    <view class="song-item__left">
      <view v-if="title" class="song-item__left-title">{{ title }}</view>
      <view v-if="content" class="song-item__left-content">{{ content }}</view>
      <view v-else class="song-item__left-content"><slot></slot></view>
    </view>
    <view class="song-item__right" v-if="more">
      <view class="song-item__right-more"
        ><svg
          t="1707100976403"
          class="song-item__right-more-icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5066"
          width="200"
          height="200">
          <path
            d="M771.2 489.6L297.6 16c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8L704 512 252.8 963.2c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0l473.6-473.6c12.8-12.8 12.8-32 0-44.8z"
            p-id="5067"></path>
        </svg>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '../../../static/var.scss';
.song-item {
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: $uni-bg-color;

  margin-bottom: $uni-spacing-row-lg;
  &__ {
    &right {
      &- {
        &more {
          &-icon {
            width: 25rpx;
            height: 25rpx;
          }
        }
      }
    }
    &left {
      &- {
        &title {
          font-size: $uni-font-size-lg;
          color: $uni-text-color;
          font-weight: bold;
        }
        &content {
          font-size: $uni-font-size-paragraph;
          color: $uni-text-color-grey;
          margin-top: 10rpx;
          width: 600rpx;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
